<template>
  <div class="app-container">
    <!-- <div class="wrap_sty_query">
      <div class="cell_sty">
        <span class="label_sty">项目名称</span>
        <el-select v-model="queryParams.name" placeholder="请选择项目名称" clearable size="mini" style="width: 240px">
          <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </div>
      <div class="cell_sty">
        <el-button type="primary" size="mini">搜索</el-button>
      </div>
    </div> -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="节点名称" prop="statgeName">
        <el-input v-model="queryParams.statgeName" placeholder="请输入节点名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="当前进度" prop="proStatus">
        <el-select v-model="queryParams.proStatus" placeholder="请选择当前进度" clearable size="small">
          <el-option v-for="dict in dict.type.pm_stage_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" size="mini">
      <el-radio-button label="left">现场采集</el-radio-button>
      <el-radio-button label="right">进度计划管理</el-radio-button>
    </el-radio-group> -->
    <!-- <div v-if="tabPosition==='left'">
      <el-button type="primary" size="mini" @click="handleCommand('handleCreateCollect')">新增</el-button>
      <el-table v-loading="loading" :data="collectList" size="mini">
        <el-table-column label="序号" prop="roleId" width="120" />
        <el-table-column label="项目名称" prop="roleName" :show-overflow-tooltip="true" />
        <el-table-column label="照片时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="createTime" width="180">
          <template slot-scope="">
            <span>未启动</span>
          </template>
        </el-table-column>
        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="照片名字" prop="roleSort" />
        <el-table-column label="备注" prop="roleSort" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCommand('handleLook',scope.row)">查看</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCommand('handleDelete',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> -->
    <!-- <div v-if="tabPosition==='right'" class="right_content"> -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- <el-button type="primary" size="mini" @click="handleCommand('handleCreateSchedule')">新增</el-button> -->
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleCommand('handleCreateSchedule')" v-hasPermi="['project:progress:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleCommand('handleUpdate')" v-hasPermi="['project:progress:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleCommand('handleDelete')" v-hasPermi="['project:progress:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['project:progress:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="progressList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" width="120"/>
      <el-table-column label="节点名称" align="center" prop="statgeName" />
      <el-table-column label="计划开始日期" align="center" prop="planStartDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.planStartDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划完成日期" align="center" prop="planEndDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.planEndDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际完成日期" align="center" prop="realEndDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.realEndDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前进度" align="center" prop="proStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pm_stage_type" :value="scope.row.proStatus" />
        </template>
      </el-table-column>
      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" prop="memo" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCommand('handleUpdate',scope.row)" v-hasPermi="['project:progress:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCommand('handleDelete',scope.row)" v-hasPermi="['project:progress:remove']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleCommand('handleUpload',scope.row)">进度照片</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCommand('handleaccomplish',scope.row)">完成</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <!-- </div> -->
    <!-- 现场采集新增弹窗 -->
    <CreateCollect ref="createcollect" />
    <!-- 进度计划管理弹窗 -->
    <CreateSchedule ref="createschedule" />
    <!-- 结项弹窗 -->
    <PostProject ref="postproject" />
    <!-- 上传多个文件 -->
    <MultipleUpload ref="multipleupload" />
  </div>
</template>

<script>
import { listProgress, getProgress, delProgress, addProgress, updateProgress, exportProgress } from "@/api/business/project/progress";
import { getfileslist } from "@/api/business/project/information";
import CreateCollect from './create_collect.vue'
import CreateSchedule from './create_schedule.vue'
import PostProject from '../../../components/post_project.vue'
import MultipleUpload from './Multipleupload.vue'
export default {
  name: "Progress",
  dicts: ['pm_stage_type'],
  components: { CreateCollect, CreateSchedule, PostProject, MultipleUpload },
  data() {
    return {
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tabPosition: 'right',
      loading: false,
      progressList: [],
      collectList: [{
        roleId: 1,
        roleName: "项目名称",
        createTime: '2022-10-3'
      }],
      // 查询参数
      queryParams: {
        // tabName:null,
        projectId: null,
        pageNum: 1,
        pageSize: 10,
        statgeName: null,
        proStatus: null,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询工程管理系统-项目进度信息列表 */
    getList() {
      this.loading = true;
      // this.queryParams.tabName = 'pm_progress'
      // this.queryParams.mainId = this.$route.query.mainId
      // getfileslist(this.queryParams).then(response=>{
      //   this.progressList = response.rows;
      //    this.total = response.total;
      // })
      this.queryParams.projectId = this.$route.query.mainId
      listProgress(this.queryParams).then(response => {
        this.progressList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id
      this.$modal.confirm('是否确认删除工程管理系统-项目进度信息编号为"' + ids + '"的数据项？').then(function () {
        return delProgress(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有工程管理系统-项目进度信息数据项？').then(() => {
        this.exportLoading = true;
        return exportProgress(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => { });
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleCreateSchedule":
          this.$refs.createschedule.init()
          break;
        // case "handleCreateCollect":
        //   this.$refs.createcollect.init()
        //   break;
        case "handleUpdate":
          this.$refs.createschedule.init(row ? row : { id: this.ids[0] })
          break;
        case "handleDelete":
          this.handleDelete(row ? row : { id: this.ids.join() })
          break;
        case "handleUpload":
          this.$refs.multipleupload.init(row)
          break;
        // case "handleLook":
        //   break;
        // case "handleaccomplish":
        //   break;
        default:
          break;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
</style>